<template>
    <!-- quickChart -->
    <svg
        v-if="iconName == 'quickChart'"
        data-v-5152c3a6=""
        xmlns="http://www.w3.org/2000/svg"
        class=""
        viewBox="0 0 20 20"
        height="24"
        width="24"
        style="background: transparent"
    >
        <path
            fill="none"
            stroke="#1A1A1A"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M 1 2 L 10.5 18 L 14.5 9 L 16 12 L 19 12 L 14.5 2 L 10.5 12 L 4.5 2 Z"
        ></path>
    </svg>
    <!-- xy -->
    <svg
        v-if="iconName == 'xy'"
        data-v-5152c3a6=""
        xmlns="http://www.w3.org/2000/svg"
        class=""
        viewBox="0 0 20 20"
        height="24"
        width="24"
        style="background: transparent"
    >
        <path
            fill="none"
            stroke="#1A1A1A"
            stroke-width="1.5"
            stroke-linecap="round"
            d="M1 1 1 18C1 19 1 19 2 19L19 19M3 17Q3 12 5 7 6 5 8 10 10 15 11 6 12 3 14 8 16 11 19 1"
        ></path>
    </svg>
    <!-- verticalBar -->
    <svg
        v-if="iconName == 'verticalBar'"
        data-v-5152c3a6=""
        xmlns="http://www.w3.org/2000/svg"
        class=""
        viewBox="0 0 20 20"
        height="24"
        width="24"
        style="background: transparent"
    >
        <path
            fill="none"
            stroke="#1A1A1A"
            stroke-width="1.5"
            stroke-linecap="round"
            d="M1 3 1 5C1 6 1 6 2 6L9 6C10 6 10 6 10 5L10 3C10 2 10 2 9 2L2 2C1 2 1 2 1 3M1 9 1 11C1 12 1 12 2 12L13 12C14 12 14 12 14 11L14 9C14 8 14 8 13 8L2 8C1 8 1 8 1 9M1 15 1 17C1 18 1 18 2 18L17 18C18 18 18 18 18 17L18 15C18 14 18 14 17 14L2 14C1 14 1 14 1 15"
        ></path>
    </svg>
</template>

<script setup lang="ts">
type IconName = 'xy' | 'quickChart' | 'verticalBar';
const iconName = defineModel<IconName>('iconName', { required: true });
</script>
